<template>
  <div class="indexFour">
    <h2>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo "></i>
      <i class="iconfont icon-huo "></i> 莫小仙品牌

      <i class="iconfont icon-huo "></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo mini"></i>
      <div class="module-time" v-if="countDown">
        <div data-v-650e4c98="" class="time-info">
          <span>抢 购</span><br /><span>倒计时</span>
        </div>
        <van-count-down :time="time" @finish="onFinish">
          <template #default="timeData">
            <span class="block">{{ timeData.hours + timeData.days * 24 }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="module-time" style="color: rgb(234, 48, 48)" v-else>
        正在抢购中
      </div>
      <!-- <div
        class="module-time"
        style="color: rgb(234, 48, 48)"
        v-else-if="!countDown && isStock"
      >
        正在抢购中
      </div> -->
      <!-- <div class="module-time" style="color: rgb(234, 48, 48)" v-else>
        已抢完
      </div> -->

      <!-- <span
            class="more"
             v-if="popular.length>3"
            @click="
              $router.push({
                path: '/giveAnEncore',
              })
            "
            >更多<van-icon name="arrow" /></span> -->
    </h2>
    <!-- <van-icon name="hot" color="red" style="transform: scale(1.5);"/> -->

    <!-- <van-skeleton title :row="5" v-if="popular.length == 0" /> -->
    <div @click="
      $router.push({
        path: '/haiActivity',
      })
      ">
      <img src="http://www.higuang365.com/public/images/common/activity/2303/mxx.jpg" alt="" />
    </div>
    <!-- <div class="my-swipe" v-else>
      <div v-for="value in popular" :key="value.F_ProductId">
        <div
          class="popular"
          @click="
            value.F_Number > 0 && !countDown
              ? $router.push({
                  path: '/product',
                  query: { id: value.F_ProductId, parents_id: username },
                })
              : ''
          "
        >
          <img
            v-if="countDown"
            :src="
              'http://www.higuang365.com/public/images/common/hai11pro/' +
                value.F_ProductId +
                '-1.jpg'
            "
          />
          <img
            v-else-if="!countDown && value.F_Number > 0"
            :src="
              'http://www.higuang365.com/public/images/common/hai11pro/' +
                value.F_ProductId +
                '-2.jpg'
            "
          />
          <img
            v-else
            :src="
              'http://www.higuang365.com/public/images/common/hai11pro/' +
                value.F_ProductId +
                '-3.jpg'
            "
          />
        </div>
      </div> -->
    <!-- <template #indicator="{ active }">
        <div class="custom-indicator">
          {{ active + 1 }}/{{ popular.length }}
        </div>
      </template> -->
    <!-- </div> -->
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "@vue/reactivity";
// import { reactive, toRefs, computed } from "@vue/reactivity";
import { GetH11GoodsList } from "@/api/home";
import { getCookie } from "@/lib/ecapi";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const data = reactive({
      popular: [
        // {
        //   F_Number: "1",
        //   F_ProductId: "300100000",
        //   F_pic_url: "public/images/common/activity/51/airuisha1.jpg",
        //   F_yuliu3: "2945",
        //    },
        // {
        //   F_Number: "1",
        //    F_ProductId: "3029",
        // },
        // {
        //   F_Number: "1",
        //    F_ProductId: "3030",
        // }
      ] as any[],
      deleteproduct:['4227', '4228', '4229','4236','4237','4238','4239','4240','4241','4242','4243','4244'],
      countDown: true,
      // unSellOut:true,
      time:
        new Date(
          `${new Date().getFullYear()}/${new Date().getMonth() + 1}/11 11:00:00`
        ).getTime() - new Date().getTime(),
      username: getCookie("S[MEMBER]"),
    });
    // const isStock = computed(() =>
    //   data.popular.some((val: { F_Number: string }) => val.F_Number > "0")
    // );
    const onLoad = async () => {
      const res = await GetH11GoodsList({
        pageNum: 1,
        pageSize: 40,
        tag_id: "44", //39
        strlv: getCookie("MLV"),
      });
      // console.log(res)

      if (!res[0]) {
        return;
      }


      // 删除满足条件按的id
     
      
      res[1] = res[1].filter((item: any) => !data.deleteproduct.includes(item.F_ProductId))
      
      data.popular = res[1];
    };

    const onFinish = () => {
      data.countDown = false;
      // onLoad();
    };
    onLoad();
    return { ...toRefs(data), onFinish };
  },
});
</script>
<style lang="scss" scoped>
.indexFour {
  h2 {
    font-size: 1.8rem;
    padding: 0.5rem;
    margin: 0;
    border-bottom: 2px solid #f7f7f7;
    position: relative;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      color: red;
    }

    .icon-huo {
      font-size: 2rem;
    }

    .mini {
      font-size: 1.4rem;
    }

    .middle {
      font-size: 1.7rem;
    }

    .more {
      font-size: 1rem;
      position: absolute;
      top: 1rem;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
    }
  }

  .my-swipe {
    margin: 0;
  }

  .popular {
    display: flex;

    // padding: 0 0.1rem;
    img {
      margin: 0.5rem 0;
      border-radius: 1rem;
      overflow: hidden;
    }
  }

  .popular-img {
    flex: 1;
    position: relative;

    img {
      height: auto;
      border-radius: 1rem;
    }

    &.sellOut:after {
      content: " 已售罄 ";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #000;
      border-radius: 1rem;
      opacity: 0.5;
      color: #fff;
      white-space: nowrap;
      font-size: 2rem;
      text-align: center;
      padding: calc(50% - 1.5rem) 0;
      border-radius: 1rem;
      box-sizing: border-box;
    }
  }

  .popular-text {
    flex: 1.4;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 1rem;
    background: url("") no-repeat;
    background-size: contain;
    background-position-x: right;

    .title {
      font-weight: 550;
      font-size: 1.4rem;
      overflow: hidden;
      width: 80%;
      margin: 0 auto;
      height: 2rem;
      line-height: 2rem;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }

    .introduce {
      color: #777;
      width: 90%;
      height: 4.8rem;
      margin: auto;
      font-size: 1.1rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      line-height: 1.6rem;
      overflow: hidden;
    }

    .price {
      color: red;
      font-weight: 600;
      font-size: 1.6rem;
      margin-right: 1rem;
    }

    .estimate {
      font-size: 1rem;
      color: #c5c5c5;
      text-decoration: line-through;
    }

    .fenxiang {
      color: #0f8a40;
      padding-top: 0.5rem;
      font-size: 1.1rem;
    }
  }

  .module-time {

    display: none;
    flex: 1;
    justify-content: space-evenly;
    padding: 0.5rem 0;
    // background: #fef2f1;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    // display:none;

    .colon {
      display: inline-block;
      height: 2.6rem;
      line-height: 2.6rem;
      margin: 0 2px;
      color: #ff0606;
    }

    .block {
      width: 1.8rem;
      height: 1.8rem;
      margin: 0.2rem;
      display: inline-block;
      border-radius: 3px;
      color: #fff;
      font-size: 1rem;
      text-align: center;
      background-color: #ff0606;
    }

    .time-info {
      color: rgb(234, 48, 48);
      font-size: 1rem;
      margin-right: 0.5rem;
    }
  }
}

.custom-indicator {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 1.2rem;
}
</style>
